<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="gt-ie9 no-js" lang="en"> <!--<![endif]-->
<head>
	<meta charset="utf-8" />
    <title>Accessible jQuery drop down menu</title>
    <meta name="description" content="Accessible jQuery drop down navigation, making your main menu accessible to all using a combination of jQuery and CSS techniques" />
    <meta name="keywords" content="menu, navigation, jquery, accessible, wcag, css" />
    <meta name="DC.Title" content="Accessible jQuery drop down menu" />
    <meta name="DC.Subject" content="navigation" />
    <meta name="DC.Description" content="Accessible jQuery drop down navigation, making your main menu accessible to all using a combination of jQuery and CSS techniques" />
    
	<meta name="google-site-verification" content="" />
	<!-- Set the viewport width to device width for mobile -->
	<meta name="viewport" content="width=device-width" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  
	<!-- Included CSS Files -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,300' rel='stylesheet' type='text/css' />
	<link rel="stylesheet" type="text/css" media="all" href="css/top-menu.css">
	<!--[if lt IE 9]>
		<link rel="stylesheet" href="css/mn_ie.css">
	<![endif]-->
    <script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/modernizr.foundation.js"></script>
    <script type="text/javascript" src="js/modernizr-2.5.3.js"></script>
    
    <!--<script type="text/javascript" src="js/mn_foundation"></script>
    //-->
	<!-- IE Fix for HTML5 Tags -->
	<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
    
</head>
<body>
	<header>
    	<h1>Top-Menu: a keyboard accessible menu powered by jQuery and CSS3</h1>
        <p>A drop-down/fly-out menu script that supports up to five total levels of navigation, all keyboard accessible.</p>
    </header>

        <nav id="top_nav">
            
                <ul id="top_nav_menu">
                  <li><a href="#1">Item one</a>
                      <ul>
                        <li><a href="#1.1">Sub Item 1.1 with a really long navigation name</a>
                          <ul>
                            <li><a href="#1.1.1">Sub Item 1.1.1</a>
                            	<ul>
                                	<li><a href="#1.1.1.1">Sub Item 1.1.1.1</a></li>
                                	<li><a href="#1.1.1.2">Sub Item 1.1.1.2</a>
                                    	<ul>
                                        	<li><a href="#1.1.1.2.1">Sub Item 1.1.1.2.1</a></li>
                                        	<li><a href="#1.1.1.2.2">Sub Item 1.1.1.2.2</a></li>
                                        	<li><a href="#1.1.1.2.3">Sub Item 1.1.1.2.3</a></li>
                                        </ul>
                                    </li>
                                	<li><a href="#1.1.1.3">Sub Item 1.1.1.3</a></li>
                                </ul>
                            </li>
                            <li><a href="#1.1.2">Sub Item 1.1.2</a></li>
                            <li><a href="#1.1.3">Sub Item 1.1.3</a></li>
                            <li><a href="#1.1.4">Sub Item 1.1.4</a></li>
                          </ul>  
                        </li>
                        <li><a href="#1.2">Sub Item 1.2</a>
                          <ul>
                            <li><a href="#1.2.1">Sub Item 1.2.1</a></li>
                            <li><a href="#1.2.2">Sub Item 1.2.2</a></li>
                            <li><a href="#1.2.3">Sub Item 1.2.3</a></li>
                            <li><a href="#1.2.4">Sub Item 1.2.4</a></li>
                          </ul>    
                        </li>
                        <li><a href="#1.3">Sub Item 1.3</a>
                          <ul>
                            <li><a href="#1.3.1">Sub Item 1.3.1</a></li>
                            <li><a href="#1.3.2">Sub Item 1.3.2</a></li>
                          </ul>   
                        </li>
                      </ul>  
                  </li>
                  <li><a href="#2">Item two</a>
                      <ul>
                        <li><a href="#2.1">Sub Item 2.1</a></li>
                        <li><a href="#2.2">Sub Item 2.2</a>
                          <ul>
                            <li><a href="#2.2.1">Sub Item 2.2.1</a></li>
                            <li><a href="#2.2.2">Sub Item 2.2.2</a></li>
                          </ul>       
                        </li>
                        <li><a href="#2.3">Sub Item 2.3</a>
                          <ul>
                            <li><a href="#2.3.1">Sub Item 2.3.1</a></li>
                            <li><a href="#2.3.2">Sub Item 2.3.2</a></li>
                          </ul>      
                        </li>
                      </ul>  
                  </li>
                  <li><a href="#3">Item three</a>
                      <ul>
                        <li><a href="#3.1">Sub Item 3.1</a></li>
                        <li><a href="#3.2">Sub Item 3.2</a></li>
                        <li><a href="#3.3">Sub Item 3.3</a></li>
                      </ul>  
                  </li>
                </ul>
            
            <script type="text/javascript">var topLevelUL = "#top_nav_menu";</script>
           	<script type="text/javascript" src="js/top-menu.js"></script>
        
        </nav>

		<section>
        	<h1>Top-Menu: navigate your menu with your mouse or your keyboard</h1>
            
            <ul>
            	<li><a href="#intro">A brief word about the script</a></li>
                <li><a href="#requirements">Requirements</a></li>
                <li><a href="#download">Download and revision history</a></li>
                <li><a href="#installation">Installation and configuration</a></li>
                <li><a href="#color">Color configuration</a></li>
                <li><a href="#limitations">Limitations and issues</a></li>
                <li><a href="#support">Support</a></li>
            </ul>
            
            
            <a id="intro"></a>
            <h2>A brief word about the script</h2>
            <p>I was commissioned to redesign the Minnesota state portal, and one of the challenges I faced was coming up with a multi-level navigation script that was keyboard accessible and didn't rely solely on mouse-over events to trigger the display of sub-menu items.  Additionally I wanted it to support up to five total levels of navigation (including the main top level) and show the user a contextual trail when they drill in.</p>
            
            <p>There was nothing out there that fit the bill (and was open source), so I built one that uses a combination of jQuery and CSS to fulfill my functionality needs.  While it works well in itself, there are additional things I wish to add to it, including greater Accessible Rich Internet Application (ARIA) support and improved support for the ever-evolving world of iOS and Android phones.</p>
            
            <p><a href="demo/index.html"><strong>View demo</strong></a></p>
            
            
            <a id="requirements"></a>
            <h2>Requirements</h2>
            
            <ul>
            	<li><strong>required:</strong> jQuery library (tested with version 1.7.2)</li>
                <li><strong>required:</strong> support for CSS conditions</li>
                <li><em>optional:</em> Browser conditional testing in opening HTML (not required, but will extend better support to inferior browsers, <em>read IE</em>)<br /><br />
                
                Here is an example of browser conditioning, which helps us test browser capability in Modernizr:<br /><br />
                
 <code>
&lt;!DOCTYPE html&gt;<br />
&lt;!--[if lt IE 7]&gt; &lt;html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"&gt; &lt;![endif]--&gt;<br />
&lt;!--[if IE 7]&gt;    &lt;html class="no-js lt-ie9 lt-ie8" lang="en"&gt; &lt;![endif]--&gt;<br />
&lt;!--[if IE 8]&gt;    &lt;html class="no-js lt-ie9" lang="en"&gt; &lt;![endif]--&gt;<br />
&lt;!--[if IE 9]&gt;    &lt;html class="no-js ie9" lang="en"&gt; &lt;![endif]--&gt;<br />
&lt;!--[if gt IE 9]&gt;&lt;!--&gt; &lt;html class="gt-ie9 no-js" lang="en"&gt; &lt;!--&lt;![endif]--&gt;<br />
&lt;head&gt;
</code>           <br /><br />    
            	There are calls to specific class values from these conditions to deal with issues in inferior browsers, so please don't modify them. 
                
                
                </li>
                <li><em>optional:</em> Modernizr framework (not required, but extends better support of HTML5 and CSS3 to older browsers)</li>
            </ul>
            
            
            
            
            
            <a id="download"></a>
            <h2>Download Top-Menu and view revision history</h2>
            
            <ul>
            	<li><a href="http://code.google.com/p/keyboard-accessible-jquery-menu/downloads/detail?name=top-menu_rev2.zip&can=2&q=" target="_blank">Download the lastest version</a></li>
            	<li><a href="https://code.google.com/p/keyboard-accessible-jquery-menu/downloads/list" target="_blank">View all versions in Google Code repository</a></li>
            
            	<li><a href="https://code.google.com/p/keyboard-accessible-jquery-menu/issues/list" target="_blank">Issue tracker</a></li>
            
            	<li><a href="https://code.google.com/p/keyboard-accessible-jquery-menu/source/browse/" target="_blank">Source files</a></li>
                </ul> 
            
            
            
            <a id="installation"></a>
            <h2>How to "install" and configure Top-Menu</h2>
            
            <p>Setting up and configuring Top-Menu was designed to be relatively easy, almost "plug 'n play."  You can freely configure the menu colors in the CSS file and the menu simply requires a nested list with the parent UL tag given a unique ID attribute (such as "top_nav_menu"). Here are the step-by-step instructions for installing and configuring Top-Menu:</p>
            
            <ol>
            	<li>
                	<h3>Place required files/code in accessible directories</h3>
                    <p>Place the top-menu.js file in your /js directory of choice and either: A) place the top-menu.css file in your /css directory and link to it, or B) copy/paste the required CSS selectors into your default CSS file.</p>
                    
                </li>
                <li>
                	<h3>Add ID to parent UL tag</h3>
                    <p>Locate the parent UL tag of your menu (this will be your first level of navigation) and add the ID value <code>top_nav_menu</code>.  If you wish to use a different value, that is fine &mdash; be sure that you edit the CSS selectors that refer to <code>top_nav_menu</code> so that they match up with your preferred ID value.  You will not have to modify the top-menu.js file.</p>
                </li>
                <li>
                	<h3>Add Javascript references and link to top-menu.js</h3>
                    <p>It's important that the elements appear in this order:  your menu, assignment of the <code>topLevelUL</code> variable, then the link to the top-level.js file.  Note that you can put the js link anywhere in your footer as long as it is placed <em>after</em> your link to the jQuery library.</p>
                    
                    <p>Your code (after the menu) may look like this:</p>
                    
                    <code>&lt;script type="text/javascript"&gt;var topLevelUL = "#top_nav_menu";&lt;/script&gt;</code><br />
                    <code>&lt;script type="text/javascript" src="js/top-menu.js"&gt;&lt;/script&gt;</code><br /><br />
                    
                    <p>Remember that whatever you assign as the <code>topLevelUL</code> variable, that it matches your parent UL tag's ID <em>and</em> that it matches the selectors in your CSS. </p>
                </li>
            </ol>
            
            <p>Beyond the three steps above, any remaining configuration comes down to style &mdash; color, fonts, size, etc. You are free to change those at risk. Be aware that future revisions of the top-menu.css file will likely change and evolve. Any customizations you make will have to be applied at your own risk.</p>
            
            
            
            <a id="color"></a>
            
            <h2>Color configurations</h2>
            
            <p>The original intent of the navigation was to show context as you drill through the levels of the navigation, progressing from darker to lighter. The menu applies a "dimming" effect to the siblings of parent menu elements to both reduce distraction and show the path. In this sample, you can best see it illustrated by drilling down from "Item one" to sub-menu item 1.1.1.2.1, showing five full levels of navigation.</p>
            
            <p>Here are the default HEX background color values for each level as well as the background color value of their hover events:</p>
            
            <code>first (base) and second:						#000</code><br />
			<code>second (hover), third:					#292929</code><br />
			<code>first (base hover), third (hover), fourth:	#444 </code><br />
			<code>fourth (hover), fifth: 					#666, </code><br />
			<code>fifth (hover), sixth: 					#757575</code><br /><br />
            
            <p>Please note that if you decide to change the color values, that you change the background colors in the right and left arrow classes as well for all of the appropriate levels. </p>
            
            <p>Example: if you wanted to change the first (base) and second level backgrounds to be a dark blue (e.g. #039) instead of black, you would want to change the following items in the CSS, modifying #000 to #039. </p>
<code>
/* - first level - */  <br />   
#top_nav_menu li a, #top_nav_menu li ul li a, .firstlevel, .secondlevel { <br />
&nbsp;&nbsp;	background: <strike>#000</strike> #039;	 <br />
} <br />
/* -- right arrow -- */ <br />
/* level 1 */ <br />
#top_nav_menu li .rightarrow { <br />
&nbsp;&nbsp;	background-color:none; <br />
&nbsp;&nbsp;	background: url(../images/mn_arrow-r.png) no-repeat center right <strike>#000</strike> #039; <br />
} <br />
/* level 2 */ <br />
#top_nav_menu li ul li .rightarrow, .right2arrow { <br />
&nbsp;&nbsp;	background-color:none; <br />
&nbsp;&nbsp;	background: url(../images/mn_arrow-r.png) no-repeat center right <strike>#000</strike> #039; <br />
} <br />
/* -- left arrow -- */ <br />
/* level 1 */ <br />
#top_nav_menu li .leftarrow { <br />
&nbsp;&nbsp;	background-color:none; <br />
&nbsp;&nbsp;	background: url(images/mn_arrow-l.png) no-repeat center right <strike>#000</strike> #039; <br />
} <br />
/* level 2 */ <br />
#top_nav_menu li ul li .leftarrow, .left2arrow { <br />
&nbsp;&nbsp;	background-color:none; <br />
&nbsp;&nbsp;	background: url(images/mn_arrow-l.png) no-repeat center right <strike>#000</strike> #039; <br />
}    <br />
</code>            <br />
            
            
            
            <a id="limitations"></a>
            <h2>Present limitations and issues</h2>
            
            <p>There are a few limitations to what Top-Menu can do and how it can be configured, some of which I hope to address in the near future, and others that I intend to leave as-is.</p>
            
            <h3>Menu orientation</h3>
            
            <p>Most noteably, the menu cannot be configured (yet) to be vertical instead of horizontal. I do intend to address that at a later version. This menu was originally intended to be for a top, horizontally oriented menu only (given the time restraints on development). But configuration of both orientations is a possibility, and I hope to make that available in a future version.</p>
            
            <h3>Limited levels</h3>
            
            <p>Top-Menu includes support for up to five levels (the top level plus four drop-down/fly-out levels).  While some other navigation scripts out there include support for "infinite" levels, I find <em>infinite</em> to be highly impractical and a usability nightmare. While this may be a personal editorial on how some architect their websites, I believe that if you have more than five levels of navigation, you probably have data architecture issues. The logistics of hovering or tabbing through so many levels of navigation is laborious and cumbersome.  Keep it simple and easy for people to find your content.</p>
            
            <p>So in a few words, I don't intend to add more levels.  If you need more, it wouldn't take too much effort to extend support by adding levels in the .js file and selectors in the CSS &mdash; but you're on your own.</p>
            
            <h3>Touch issues with iOS</h3>
            
            <p>While Android seems to behave and allow the toggling of sub-menu items with a single touch, iOS seems to want to send you to the item you click on instead of showing the sub-menu first.  I am investigating options for the touch displays and hope to have a fix at a later date.</p>
            
            
            
            <a id="support"></a>
            <h2>Support</h2>
            
            <p>This script is Open Source and is considered "as-is" &mdash; I cannot guarantee that it will work with your environment, your version of jQuery, or any other items within the framework of your website.  I also cannot guarantee that future or previous versions will work within the framework of your website.  You use this script at your own risk.  There are no warranties, guarantees, or promises that ensure any level of support or satisfaction.</p>
            
            <p>If you have issues, you can submit them through the <a href="https://code.google.com/p/keyboard-accessible-jquery-menu/issues/list" target="_blank">Top-Menu issue tracker</a> in my Google Code repository.  I cannot guarantee that I will be able to address every issue submitted, let alone fix them, but I will try to make the script as error-free as possible.</p>
            
            <p>If you wish to become involved in its development, you can contact me at:  michael DOT tangen {AT} gmail DOT com.</p>
            
            <p>You can view full version histories, source code, and track issues at the <a href="http://code.google.com/p/keyboard-accessible-jquery-menu/" target="_blank">keyboard-accessible-jquery-menu Google Code repository</a>.</p>
            
            </section>
            
            
            
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-33830281-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</body>
</html>